<template>
  <div>
    <!--地图-->
    <MapLayersMap
        :map="map"
        :dataTypeInfoArray="dataTypeInfoArray"
        :layerInfoParams="layerDataQueryParams"
        :clearAllLayersBool="clearAllLayersBool"
        :showAllLayersBool="showAllLayersBool"
        :customStylesObj="customStylesObj"
        @getLegendHtml="getLegendHtml"
        @finishClearAll="finishClearAll"
        @setSelectData="setSelectData"
        @finishShowAll="finishShowAll"
    ></MapLayersMap>
    <!--图层图例-->
    <div class="new-layerLegendDiv">
      <p @click="showHideLayerDiv">
        <template v-if="showHideLayerDivBool==false">
          <img title="打开图层选择" src="@/assets/map/image/newImage/layer.png">
          <span style="color:#3a385e;">图层</span>
        </template>
        <template v-else>
          <img title="关闭图层选择" src="@/assets/map/image/newImage/layer-r.png">
          <span style="color:#107ce5;">图层</span>
        </template>
      </p>
      <p class="new-layerLengendDiv-split"></p>
      <p @click="showHideLegendDiv">
        <template v-if="showHideLegendDivBool==false">
          <img title="打开图例" src="@/assets/map/image/newImage/legend.png">
          <span style="color:#3a385e;">图例</span>
        </template>
        <template v-else>
          <img title="关闭图例" src="@/assets/map/image/newImage/legend-r.png">
          <span style="color:#107ce5;">图例</span>
        </template>
      </p>
    </div>
    <!--图层选择-->
    <div v-if="showHideLayerDivBool" class="new-layerSelectDiv">
      <el-cascader v-model="layerSelectData" placeholder="请选择图层"
                   :options="layerOptions" :props="layerProps" @change="chooseLayers"
                   separator="," collapse-tags collapse-tags-tooltip clearable></el-cascader>
    </div>
    <!--图层图例-->
    <div v-if="showHideLegendDivBool" class="layerMap-legend">
      <!--滚动条-->
      <el-scrollbar max-height="500px">
        <p>图例</p>
        <div v-if="legendInfoHtml && legendInfoHtml!==''" v-html="legendInfoHtml"></div>
        <div v-for="item in layerShowHideArray" :key="item.code" v-show="item.show" v-html="item.legendHtml">
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>
<script setup>
//地图
import MapLayersMap from './map.vue';

const props = defineProps({
  map: {//地图对象
    default: {},
    type: Object,
  },
  dataTypeInfoArray: {//图层数据类型数组
    default: [],
    type: Array,
  },
  layerInfoParams: {//查询图层数据参数
    default: {},
    type: Object,
  },
  legendInfoHtml: {//图例信息html
    default: "",
    type: String,
  },
  customStylesObj: {//自定义样式对象
    default: {},
    type: Object,
  }
});

const { map,dataTypeInfoArray,layerInfoParams,legendInfoArray,customStylesObj } = toRefs(props);


const emits = defineEmits(['setSelectId','getLayerSelectData']);


const loading = ref(false);

//初始化数据
const data = reactive({
  layerDataQueryParams: {//查询图层信息参数（图层序号、图层名称、查询条件、是否显示）
    code:"",
    name:"",
    sqlText:'',
    show:false
  },
});
let {
  layerDataQueryParams,
} = toRefs(data);

//图层图例
const showHideLayerDivBool = ref(false);//是否显示图层选择面板
const showHideLegendDivBool = ref(false);//是否显示图例面板
//图层选择
const layerOptions = ref([]);
const layerProps = ref({ multiple: true });//图层选择--多选
const layerSelectData = ref([]);//图层选择内容
const layerShowHideArray = ref([]);//图层是否显示数组
const clearAllLayersBool = ref(false);//清除全部图层
const showAllLayersBool = ref(false);//显示全部图层

//图层数据类型数组
watch(() => props.dataTypeInfoArray, val => {
  if (val) {
    let array = [];
    let showHideArray = [];
    val.forEach((item,index)=>{
      array.push({ value: item.name, label: item.name });
      showHideArray.push({ code: item.code, name: item.name, show:false,legendHtml:"" });
    });
    layerOptions.value = array;
    layerShowHideArray.value = showHideArray;
  }
}, { deep: true, immediate: true });

//图层查询参数
watch(() => props.layerInfoParams, val => {
  if (val) {
    layerDataQueryParams.value = val;
    let selectLayerNameArray = [];//勾选的图层名称数组
    if(val.showAllLayers){//勾选显示全部图层
      let array = props.dataTypeInfoArray;
      if(array && array.length>0){
        for(let i=0;i<array.length;i++){
          let name = array[i].name;
          layerSelectData.value.push([name]);
          selectLayerNameArray.push([name]);
          if(showHideLayerDivBool.value==true){//显示图层选择控件，刷新显示
            showHideLayerDivBool.value = false;//先隐藏
            setTimeout(function(){
              showHideLayerDivBool.value = true;//再显示，可刷新
            },100);
          }
        }
        //显示全部图层
        showAllLayersBool.value = true;
        //图层显示隐藏数组
        let showHideArray = layerShowHideArray.value;
        for(let i=0;i<showHideArray.length;i++){
          showHideArray[i].show = true;//显示
        }
        showHideLegendDivBool.value = true;//显示图例
      }
    }else{//勾选显示1个图层
      layerSelectData.value.push([val.name]);
      selectLayerNameArray.push([val.name]);
      if(showHideLayerDivBool.value==true){//显示图层选择控件，刷新显示
        showHideLayerDivBool.value = false;//先隐藏
        setTimeout(function(){
          showHideLayerDivBool.value = true;//再显示，可刷新
        },100);
      }
      //图层显示隐藏数组
      let showHideArray = layerShowHideArray.value;
      for(let i=0;i<showHideArray.length;i++){
        if(showHideArray[i].name==val.name){
          showHideArray[i].show = true;//显示
          showHideLegendDivBool.value = true;//显示图例
          break;
        }
      }
    }
    emits("getLayerSelectData",selectLayerNameArray);
  }
}, { deep: true, immediate: true });

//显示隐藏图层选择面板
function showHideLayerDiv(){
  if(showHideLayerDivBool.value){
    showHideLayerDivBool.value = false;
  }else{
    showHideLayerDivBool.value = true;
  }
}

//显示隐藏图例面板
function showHideLegendDiv(){
  if(showHideLegendDivBool.value){
    showHideLegendDivBool.value = false;//显示图例面板
  }else{
    showHideLegendDivBool.value = true;//隐藏图例面板
  }
}

//勾选图层事件
function chooseLayers(){
  let selectLayerNameArray = [];//勾选的图层名称数组
  let array = layerSelectData.value;
  // console.log("勾选图层事件");
  // console.log(array);
  emits("getLayerSelectData",array);
  if(array.length>0){
    for(let i=0;i<array.length;i++){
      let arr = array[i];
      let name = arr[0];
      if(arr.length==2){
        name = arr[1];
      }
      selectLayerNameArray.push(name);
    }

    //图层显示隐藏数组
    let showHideArray = layerShowHideArray.value;
    for(let i=0;i<showHideArray.length;i++){
      if(selectLayerNameArray.indexOf(showHideArray[i].name)==-1){//未勾选
        if(showHideArray[i].show==true){
          showHideArray[i].show = false;//隐藏
          layerDataQueryParams.value = {//查询图层信息参数（图层序号、图层名称、查询条件、是否显示）
            code:showHideArray[i].code,
            name:showHideArray[i].name,
            sqlText:'',
            show:false
          };
          break;
        }
      }else{//已勾选
        if(showHideArray[i].show==false){
          showHideArray[i].show = true;//显示
          showHideLegendDivBool.value = true;//显示图例
          layerDataQueryParams.value = {//查询图层信息参数（图层序号、图层名称、查询条件、是否显示）
            code:showHideArray[i].code,
            name:showHideArray[i].name,
            sqlText:'',
            show:true
          };
          break;
        }
      }
    }
  }else{//清除全部图层
    clearAllLayersBool.value = true;
    //图层显示隐藏数组
    let showHideArray = layerShowHideArray.value;
    for(let i=0;i<showHideArray.length;i++){
      if(showHideArray[i].show==true){
        showHideArray[i].show = false;//隐藏
      }
    }
  }
}

//完成清除全部图层
const finishClearAll = (bool)=>{
  if(bool){
    clearAllLayersBool.value = false;
  }
}

//完成显示全部图层
const finishShowAll = (bool)=>{
  if(bool){
    showAllLayersBool.value = false;
  }
}

//图例
const getLegendHtml = (obj)=>{
  //图层显示隐藏数组
  let showHideArray = layerShowHideArray.value;
  for(let i=0;i<showHideArray.length;i++){
    if(showHideArray[i].name==obj.name){
      showHideArray[i].legendHtml = obj.legendHtml;//显示图例
      break;
    }
  }
}

//设置选择数据ID
const setSelectData = (obj)=>{
  emits("setSelectId", obj);
}

</script>
<style scoped lang="scss">
/*图层图例*/
.new-layerLegendDiv {
  position: absolute;
  top:20px;
  right:10px;
  width: 54px;
  /*height: 220px;*/
  background: #fff;
  box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
  border:1px solid #707070;
  border-radius: 4px;
  cursor:pointer;
}
.new-layerLegendDiv p {
  padding: 10px;
  margin:0px;
}
.new-layerLegendDiv p img {
  width:25px;
  height:25px;
  margin-left: 3px;
}
.new-layerLegendDiv p span {
  width:32px;
  height:21px;
  font-size: 14px;
  color:#3a385e;
  text-align:center;
  line-height:24px;
  border:0.5px solid #f5f5f5;
}
.new-layerLengendDiv-split {
  width: 32px!important;
  height: 1px!important;
  padding: 0px!important;
  margin: 0px!important;
  margin-left: 10px!important;
  border-top: 1px dashed #6f7ea8;
}
.new-layerSelectDiv {
  position: absolute;
  top: 20px;
  right: 70px;
  width: 256px;
  //height: 110px;
  height: 70px;
  background: #fff;
  box-shadow: 0px 0px 20px rgb(0 0 0 / 20%);
  border: 1px solid #707070;
  border-radius: 4px;
  padding: 18px;
  padding-right: 0px;
}
.new-legendDiv {
  position: absolute;
  top: 140px;
  right: 70px;
  width: 256px;
  background: #fff;
  box-shadow: 0px 0px 20px rgb(0 0 0 / 20%);
  border: 1px solid #707070;
  border-radius: 4px;
  padding: 5px;
}
.new-legendDiv div {
  position: relative;
  height: 16px;
  line-height: 16px;
  font-size: 13px;
  margin: 8px;
}
.new-legendDiv div span {
  line-height: 16px;
  font-size: 13px;
}
.new-legendDiv div div {
  position: relative;
  top: 2px;
  left: 8px;
  width: 30px;
  height: 14px;
  margin: 0px !important;
  margin-right: 25px !important;
  display: inline-block;
}
/*面*/
.new-legendDiv-polygon {
  position: relative !important;
  left: 0px !important;
  top: 0px !important;
  border:1px solid black;
  background:#fff;
}
/*线*/
.new-legendDiv-line {
  position: relative !important;
  height: 5px !important;
  top: -4px !important;
  left: 0px !important;
}
/*点*/
.new-legendDiv-point {
  position: relative !important;
  left: 8px !important;
  top: 0px !important;
  height: 12px !important;
  width: 12px !important;
  border-radius: 10px !important;
}

.layerMap-legend {
  position: absolute;
  right: 10px;
  bottom: 10px;
  min-height: 50px;
  background: #fff;
  padding: 10px;
  overflow: auto;
  min-width: 200px;
  box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
  border:1px solid #707070;
  border-radius: 4px;
}
.layerMap-legend p:first-child{
  text-align: center;font-weight: bold;
}
</style>